<template>
    <div class="video-player" ref="player"></div>
</template>

<script>
import Player from "xgplayer"
import { toRem } from "@/utils"

export default {
    name: "VideoPlayer",
    props: ["url"],
    mounted() {
        this.initPlayer()
    },
    methods: {
        initPlayer() {
            if (!this.url) return
            this.player = new Player({
                el: this.$refs.player,
                url: this.url,
                videoInit: true,
                lang: "zh-cn",
                width: "100%",
                playbackRate: [0.5, 0.75, 1, 1.5, 2]
            })
            
            this.transferRem()
        },
        transferRem() {
            this.player.on("ready", () => {
                const videoWrapper = this.$refs.player
                const height = videoWrapper.style.height
                const remHeight = toRem(Number(height.replace("px", "")))
                videoWrapper.style.height = remHeight
            })
        }
    },
    watch: {
        url(url, oldUrl) {
            if (url && url !== oldUrl) {
                if (!this.player) {
                    this.initPlayer()
                } else {
                    this.player.src = url
                    this.player.reload()
                }
            }
        }
    }
}
</script>

<style>
.xgplayer-error {
    display: none;
}
</style>
